<template>
	<view>
		<view class="swiper">
			<u-swiper radius="1" height="280" :list="list1" @click="click"></u-swiper>
			<image @click="fanhui" :style="{ top: safeTop }" class="fanhui-img" src="../../static/index/fanhui.png" mode=""></image>
		</view>
		
		<view class="box">
			<view class="title">店铺名·24H自助台球(红旗路店)</view>
			<view class="tab">台球桌 6号桌</view>
			
			<view class="hint-box">
				<view class="hint-top">
					<view class="money-img">
						<image src="../../static/index/money.png" mode=""></image>
					</view>
					<view class="price-box">
						<view class="price-title">12.5元/30分钟</view>
						<view class="price-text">后续收费标准为12.5元/30分钟（25元/小时），不足30分钟按30分钟计算</view>
					</view>
				</view>
				<view class="hint-bottom">预订成功后您需要在30分钟内到店并开台，支付的￥10.00会在台费中自动抵扣；若您超时仍未开台，则该台桌无法继续为您保留，￥10.00押金将无法退还</view>
			</view>
		</view>
		
		<view class="pay-btn-box">
			<view class="pay-btn">
				<view class="btn-l">￥ <text>10.0</text> </view>
				<view class="btn-r">立即预定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				safeTop: uni.getStorageSync('safeTop') || 20 + 'px',
				list1: ['../../static/index/table-item5.png'],
			}
		},
		methods: {
			fanhui(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.swiper {
		width: 750rpx;
		height: 560rpx;
		
		.fanhui-img {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			padding-left: 32rpx;
			z-index: 999;
		}
	}
	
	.box {
		position: relative;
		top: -70rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 40rpx 32rpx 0 32rpx;
		.title {
			font-weight: bold;
			font-size: 40rpx;
			color: #1C274C;
		}
		.tab {
			height: 48rpx;
			line-height: 48rpx;
			padding: 0 16rpx;
			background: #F6F8FC;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #6B738B;
			display: inline-block;
			margin: 16rpx 0;
		}
		
		.hint-box {
			width: 686rpx;
			background: #EAEBEE;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-top: 16rpx;
			.hint-top {
				display: flex;
				padding: 32rpx 32rpx 24rpx 32rpx;
				background: #F7F8FA;
				border-radius: 24rpx;
			}
			
			.money-img {
				width: 54rpx;
				height: 54rpx;
				margin-right: 32rpx;
				image {
					width: 54rpx;
					height: 54rpx;
				}
			}
			.price-box {
				.price-title {
					font-weight: bold;
					font-size: 28rpx;
					color: #1C274C;
				}
				.price-text {
					font-weight: 500;
					font-size: 22rpx;
					color: #A4A9B7;
					margin-top: 8rpx;
				}
			}
			
			.hint-bottom {
				font-weight: 500;
				font-size: 22rpx;
				color: #6B738B;
				padding: 24rpx 32rpx 24rpx 32rpx;
			}
		}
	}
	
	
	.pay-btn-box {
		width: 100%;
		position: absolute;
		bottom: 0rpx;
		left: 50%;
		transform: translate(-50%,-50%);
		.pay-btn {
			width: 686rpx;
			margin: auto;
			display: flex;
			line-height: 106rpx;
			.btn-l {
				width: 420rpx;
				height: 106rpx;
				background: #102820;
				border-radius: 20rpx 0rpx 0rpx 20rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				padding-left: 32rpx;
				text {
					font-weight: bold;
					font-size: 40rpx;
				}
			}
			.btn-r {
				width: 234rpx;
				height: 106rpx;
				background: #4BC264;
				border-radius: 0rpx 16rpx 16rpx 0rpx;
				font-size: 34rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
</style>
